<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>公告管理</el-breadcrumb-item>
                    <el-breadcrumb-item>公告管理</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="selectdiv" style="margin-bottom: 25px;">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="announcementForm.titel" placeholder="输入公告标题">
                        <el-button slot="append" icon=" el-icon-search" @click="getAnnouncementSeclectTitleList"></el-button></el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="announcementForm.date" placeholder="输入公告日期">
                        <el-button slot="append" icon="el-icon-search" @click="getAnnouncementSeclectDateList"></el-button></el-input>

                </el-col>
                <el-button type="primary" @click="addDialogVisible = true">新建</el-button>
            </el-row>
        </div>
        <div>
            <el-card>
                <el-table
                        :data="announcementlist"
                        style="width: 100%">
                    <el-table-column
                            prop="announcementId"
                            label="公告编号"
                            min-width="10%">
                    </el-table-column>
                    <el-table-column
                            prop="announcementName"
                            label="公告标题"
                            min-width="20%">
                        <template slot-scope="scope">
                            <el-tag size="medium" effect="plain" :hit="false" >
                                <el-button type="text" style="margin-top: -5px" @click="showAnnouncementContent(scope.row.announcementId)">
                                    {{scope.row.announcementName}}
                                </el-button></el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="announcementDate"
                            label="公告发布日期"
                            min-width="15%">
                    </el-table-column>
                    <el-table-column
                            prop="comment"
                            label="备注"
                            min-width="30%">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            min-width="10%">
                        <template slot-scope="scope">
                            <el-button type="text" @click="showEditDialog(scope.row.announcementId)">修改</el-button>
                            <el-button @click="removeAnnouncementById(scope.row.announcementId)" type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        style="display: flex; justify-content: flex-end;margin-top: 10px;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="announcementForm.pagenum"
                        :page-sizes="[2, 5, 10, 15]"
                        :page-size="announcementForm.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-card>

        </div>
        <!--公告内容弹窗-->
        <el-dialog
                title="新建公告"
                :visible.sync="showDialog"
                width="50%"
                height="600px"
                @close="addDialogClosed">
            <el-form :inline="true" :model="showAnnouncementForm" ref="addAnnouncementFormRef">
                <el-form-item label="公告标题" size="large" prop="announcementName">
                    <el-input v-model="showAnnouncementForm.announcementName" placeholder="公告标题"
                              style="width: 400px;"
                              disabled></el-input>
                </el-form-item>
                <el-form-item label="公告内容" prop="announcementContent">
                    <el-input style="width:400px;" type="textarea"
                              placeholder="请输公告入内容"
                              :autosize="{ minRows: 4, maxRows: 10}"
                              show-word-limit
                              disabled
                              v-model="showAnnouncementForm.announcementContent">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">关闭</el-button>
           </span>
        </el-dialog>
        <!--新建公告弹窗-->
        <el-dialog
                title="新建公告"
                :visible.sync="addDialogVisible"
                width="50%"
                height="600px"
                @close="addDialogClosed">

            <el-form :inline="true" :model="addAnnouncementForm" ref="addAnnouncementFormRef" :label-position="labelPosition" label-width="100px">
                <el-form-item label="公告标题" size="large" prop="announcementName">
                    <el-input v-model="addAnnouncementForm.announcementName" placeholder="公告标题"
                              style="width: 400px;"></el-input>
                </el-form-item>

                <el-form-item label="发布日期" prop="announcementDate">
                    <el-date-picker
                            v-model="addAnnouncementForm.announcementDate"
                            type="date"
                            placeholder="选择日期"
                            style="width: 200px;">
                    </el-date-picker>
                </el-form-item>
                <div>
                    <el-form-item label="公告内容" prop="announcementContent">
                        <el-input style="width:400px;" type="textarea"
                                  placeholder="请输公告入内容"
                                  :autosize="{ minRows: 4, maxRows: 10}"
                                  show-word-limit v-model="addAnnouncementForm.announcementContent">
                        </el-input>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="备注" prop="comment">
                        <el-input style="width:400px;" type="textarea"
                                  placeholder="请输备注"
                                  :autosize="{ minRows: 4, maxRows: 10}"
                                  show-word-limit v-model="addAnnouncementForm.comment">
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>

            <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addAnnouncement">提 交</el-button>
  </span>
        </el-dialog>
        <!--修改公告弹窗-->
        <el-dialog
                title="修改公告"
                :visible.sync="editDialogVisible"
                width="50%"
                :close="editDialogClosed">
            <div>
                <el-form :inline="true" :model="editAnnouncementForm" class="demo-form-inline"
                         ref="editAnnouncementFormRef" :label-position="labelPosition" label-width="100px">
                    <el-form-item label="修改公告标题" prop="announcementName">
                        <el-input v-model="editAnnouncementForm.announcementName" placeholder="修改公告标题"
                                  style="width: 400px;"></el-input>
                    </el-form-item>

                    <el-form-item label="修改发布日期" prop="announcementDate">
                        <el-date-picker
                                v-model="editAnnouncementForm.announcementDate"
                                type="date"
                                placeholder="选择日期"
                                style="width: 200px;">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="修改公告内容">
                        <el-input style="width:400px;" type="textarea"
                                  placeholder="请输公告入内容"
                                  :autosize="{ minRows: 4, maxRows: 10}"
                                  show-word-limit v-model="editAnnouncementForm.announcementContent">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="修改公告备注">
                        <el-input style="width:400px;" type="textarea"
                                  placeholder="请输公告入内容"
                                  :autosize="{ minRows: 4, maxRows: 10}"
                                  show-word-limit v-model="editAnnouncementForm.comment">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editAnnouncement">提 交</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        created() {
            this.getAnnouncementList()
        },
        methods: {
            addDialogClosed() {
                this.$refs.addAnnouncementFormRef.resetFields()
            },
            async getAnnouncementSeclectTitleList() {
                const {data: resp} = await this.$http.get('announcement/findByTitle/' + this.announcementForm.titel)
                if (resp.code !== 200) {
                    return this.$message.error('获取公告列表失败！')
                }
                this.announcementlist = resp.data
                this.total = resp.data.total
            },
            //展示公告内容
            async showAnnouncementContent(announcementId){
                console.log(announcementId)
                const {data: res} = await this.$http.get('announcement/findById/' + announcementId)
                if (res.code !== 200) {
                    return this.$message.error('查询公告信息失败！')
                }
                this.showAnnouncementForm = res.data
                this.showDialog = true
            },
            async getAnnouncementSeclectDateList() {
                const {data: resp} = await this.$http.get('announcement/findByDate/' + this.announcementForm.date)
                if (resp.code !== 200) {
                    return this.$message.error('获取公告列表失败！')
                }
                this.announcementlist = resp.data
                this.total = resp.data.total
            },
            async getAnnouncementList() {
                const {data: resp} = await this.$http.get('announcement/findAll/' + this.announcementForm.pagenum + '/' + this.announcementForm.pagesize)
                if (resp.code !== 200) {
                    return this.$message.error('获取公告列表失败！')
                }
                this.announcementlist = resp.data.records
                this.total = resp.data.total
            },
            handleSizeChange(newSize) {
                // console.log(newSize)
                this.announcementForm.pagesize = newSize
                this.getAnnouncementList()
            },
            async showEditDialog(announcementId) {
                console.log(announcementId)
                const {data: res} = await this.$http.get('announcement/findById/' + announcementId)
                if (res.code !== 200) {
                    return this.$message.error('查询公告信息失败！')
                }
                this.editAnnouncementForm = res.data
                this.editDialogVisible = true
            },
            editDialogClosed() {
                this.$refs.editAnnouncementFormRef.resetFields()
            },
            // 监听 页码值 改变事件
            handleCurrentChange(newSize) {
                // console.log(newSize)
                this.announcementForm.pagenum = newSize +1
                this.getAnnouncementList()
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },

            async removeAnnouncementById(announcementId) {
                const confirmResult = await this.$confirm(
                    '此操作将永久删除该公告, 是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err)
                // 点击确定 返回值为：confirm
                // 点击取消 返回值为： cancel
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                const {data: res} = await this.$http.delete('announcement/deleteAnnouncementById/' + announcementId)
                if (res.code !== 200) return this.$message.error('删除公告失败！')
                this.$message.success('删除公告成功！')
                this.getAnnouncementList()
            },
            editAnnouncement() {
                // 提交请求前，表单预验证
                this.$refs.editAnnouncementFormRef.validate(async valid => {
                    // console.log(valid)
                    // 表单预校验失败
                    console.log(this.editAnnouncementForm.announcementId)
                    if (!valid) return
                    const {data: res} = await this.$http.put(
                        'announcement/updateAnnouncement' ,
                        {
                            announcementId: this.editAnnouncementForm.announcementId,
                            announcementName: this.editAnnouncementForm.announcementName,
                            announcementDate: this.editAnnouncementForm.announcementDate,
                            announcementContent: this.editAnnouncementForm.announcementContent,
                            comment: this.editAnnouncementForm.comment
                        }
                    )
                    if (res.code !== 200) {
                        return this.$message.error('更新公告信息失败！')
                    }
                    // 隐藏添加用户对话框
                    this.editDialogVisible = false
                    this.$message.success('更新公告信息成功！')
                    this.getAnnouncementList()
                })
            },
            addAnnouncement() {
                this.$refs.addAnnouncementFormRef.validate(async valid => {
                    // console.log(valid)
                    // 表单预校验失败
                    if (!valid) return
                    console.log(this.addAnnouncementForm)
                    const {data: resp} = await this.$http.post('/announcement/addAnnouncement', this.addAnnouncementForm)
                    console.log(this.addAnnouncementForm)
                    if (resp.code !== 200) {
                        this.$message.error('添加公告失败！')
                    }
                    this.$message.success('添加公告成功！')
                    // 隐藏添加用户对话框
                    this.addDialogVisible = false
                    this.getAnnouncementList()
                })


                // this.$refs.Announcementref.validate(async valid => {
                //     if (!valid) return
                //     // const {data: res} = await this.$http.post('/sysAnnouncements/addAnnouncement', this.Announcement)
                //     axios.post('/announcements/addAnnouncement', this.Announcement).then(resp => {
                //         if (resp.code !== 200) {
                //             this.$message.error('添加失败')
                //             return
                //         }
                //         this.$message.success('添加成功')
                //         this.dialogCreate = false
                //         console.log(resp)
                //     })
                //
                // })
            },

        },
        data() {
            return {
                labelPosition:'right',
                announcementlist: [{

                }],
                announcementForm: {
                    titel: '',
                    date: '',
                    pagenum: 1,
                    pagesize: 10
                },
                total: 0,
                dialogVisible: false,
                dialogEdit: false,
                addDialogVisible: false,
                addAnnouncementForm: {
                    announcementName: '',
                    announcementDate: '',
                    announcementContent: '',
                    comment: ''
                },
                showDialog: false,
                showAnnouncementForm:{},
                editDialogVisible: false,
                editAnnouncementForm: {},
                dialogCreate: false,
            }
        },
    }
</script>

<style scoped>
    .textsize {
        height: 50%;
        width: 50%;
    }

    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .pagination {
        position: absolute;
        right: 100px;
        margin-top: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

    .createann {
        position: absolute;
        left: 700px;
        top: 0px;

    }
</style>

